<template>
	<view>
		<!-- 页首 -->
		<zw-header-ai></zw-header-ai>
		<view class="menu-wrapper">
			<view class="wrap">
				<!-- 左侧菜单 -->
				<view class="menu-wrap" style="width: 280rpx;">
					<view class="fui-col__item fui-color__black " :class="type==1?'active':''" @click="setComd(1)">
						<image src="/static/image/ai/tp.png"></image>
						<view class="text">
							款式融合
						</view>
					</view>
					<view class="fui-col__item fui-color__black" :class="type==2?'active':''" @click="setComd(2)">
						<image src="/static/image/ai/wz.png"></image>
						<view class="text">文字创款</view>
					</view>
					<view class="fui-col__item fui-color__black" :class="type==3?'active':''" @click="setComd(3)">
						<image src="/static/image/ai/wz.png"></image>
						<view class="text">指令解析</view>
					</view>
					<!-- <view style="height: 1000rpx;border-bottom: 1px solid #D8D8D8;"></view> -->
					<view
						style="position: absolute;bottom: 0;width: 280rpx;border-top: 1px solid #D8D8D8;padding-top: 40rpx;">
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/wd.png"></image>
							<view class="text">使用教程</view>
						</view>
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/wx.png"></image>
							<view class="text">交流社群</view>
						</view>
						<view class="fui-col__item fui-color__black">
							<image src="/static/image/ai/kf.png"></image>
							<view class="text">联系我们</view>
						</view>
					</view>
				</view>
				<!-- 中间内容 -->
				<view class="main-wrap">
					<view class="tool" style="">
						<image src="/static/image/ai/share.png"></image>

						<zb-tooltip color="transparent" placement="bottom-start" ref="dw_tooltipzl"
							:visible="dw_visible">
							<image src="/static/image/ai/xz.png">
								<view slot="content"
									style="box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);border: 1px solid #BCBCBC;background: #FFFFFF;border-radius: 13px;width: 250px;height: 150px;">
									<view style="padding:20rpx 40rpx 20rpx 40rpx;">
										<view style="margin-bottom: 40rpx;cursor: pointer;" class="space-between">
											<view style="color: #000000;font-size: 10px;font-weight: 600;">
												下载作品
											</view>
											<image src="../../../static/image/home/close.png"
												@click="$refs.dw_tooltipzl.close()"
												style="width: 20rpx;height: 20rpx;padding-right: 0;">
											</image>
										</view>
										<view style="margin-bottom: 40rpx;cursor: pointer;" class="space-between">
											<view style="color: #000000;font-size: 10px;font-weight: 600;">
												下载图片范围
											</view>
											<view>
												<fui-dropdown-menu :size="28" selectedColor="#465CFF" :options="options"
													@click="rangeItemClick" @close="rangeClose" ref="ddmRange">
													<view class="fui-filter__item" @tap="filterTap">
														<view style="color: #000;font-size: 7px;">{{range}}</view>
														<view class="fui-filter__icon"
															:class="{'fui-icon__ani':rangeShow}">
															<fui-icon name="turningdown" :size="32"></fui-icon>
														</view>
													</view>
												</fui-dropdown-menu>
											</view>
										</view>
										<view style="color: #FFFFFF;" class="space-between">
											<view style="border-radius: 10px;background: #D8D8D8;padding: 6px 34px;"
												@click="$refs.dw_tooltipzl.close()">取消</view>
											<view style="border-radius: 10px;background: #0033FF;padding: 6px 34px;"
												@click="download">确定</view>
										</view>
									</view>
								</view>
						</zb-tooltip>
						<zb-tooltip color="transparent" placement="bottom-start" ref="del_tooltipzl"
							:visible="del_visible">
							<image src="/static/image/ai/del.png">
								<view slot="content"
									style="box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);border: 1px solid #BCBCBC;background: #FFFFFF;border-radius: 13px;width: 250px;height: 150px;">
									<view style="padding:20rpx 40rpx 20rpx 40rpx;">
										<view style="margin-bottom: 40rpx;cursor: pointer;" class="space-between">
											<view style="color: #000000;font-size: 10px;font-weight: 600;">
												删除作品
											</view>
											<image src="../../../static/image/home/close.png"
												@click="$refs.del_tooltipzl.close()"
												style="width: 20rpx;height: 20rpx;padding-right: 0;">
											</image>
										</view>
										<view style="margin-bottom: 40rpx;cursor: pointer;" class="space-between">
											<view style="color: #000000;font-size: 10px;font-weight: 600;">
												删除图片范围
											</view>
											<view>
												<fui-dropdown-menu :size="28" selectedColor="#465CFF"
													:options="deloptions" @click="delrangeItemClick"
													@close="delrangeClose" ref="delddmRange">
													<view class="fui-filter__item" @tap="filterTap">
														<view style="color: #000;font-size: 7px;">{{delrange}}</view>
														<view class="fui-filter__icon"
															:class="{'fui-icon__ani':delrangeShow}">
															<fui-icon name="turningdown" :size="32"></fui-icon>
														</view>
													</view>
												</fui-dropdown-menu>
											</view>
										</view>
										<view style="color: #FFFFFF;" class="space-between">
											<view style="border-radius: 10px;background: #D8D8D8;padding: 6px 34px;"
												@click="$refs.del_tooltipzl.close()">取消</view>
											<view style="border-radius: 10px;background: #0033FF;padding: 6px 34px;"
												@click="del">确定</view>
										</view>
									</view>
								</view>
						</zb-tooltip>
						<image src="/static/image/ai/fb.png"></image>
						<image src="/static/image/ai/ch.png"></image>
					</view>
					<view
						style="border: 1px solid rgb(216, 216, 216);width: 100%;height:100%;background-color: #F3F3F3;display: flex;justify-content: center;align-items: center;">
						<view class="card"
							:style="attachment.length>0?'background-color: transparent;border: 0 dashed #C1C1C1;':''">
							<fui-upload-ai
								style="display: flex;justify-content: space-between;align-items: center;width: 100%;height:100%;"
								immediate :url="uploadUrl" radius="24" delColor="#373737" isDel background="#fff"
								max="4" width="100%" height="100%" ref="upload" @success="success" @error="error"
								@complete="complete">
								<view v-if="attachment.length==0"
									style="display: flex;justify-content: center;align-items: center;margin: 0 auto;width: 100%;height: 100%;">
									<view style="display: flex;justify-content: center;align-items: center;">
										<view>
											<image src="/static/image/ai/img.png"
												style="width: 150rpx;height: 150rpx;margin: 0 auto;display: flex;margin-bottom: 100rpx;">
											</image>
											<view
												style="color: #0033FF;font-size: 14px;font-weight: 350;text-align: center;text-align: center;">
												<view style="color: #434343;font-size: 28rpx;">拖拽（2-4张）图片到这里，或点击上传
												</view>
												<view style="color: #929292;font-size: 24rpx;margin-top: 20rpx;">
													支持图片格式：JPG,PNG, Max：10MB</view>
											</view>
										</view>
									</view>
								</view>
							</fui-upload-ai>
						</view>
						<view class="card">
							<view v-if="imageList.length>0&&id>0">
								<image :src="imageList[0]" style="width: 100%;padding: 0;" mode="widthFix"></image>
								<view v-if="is_tab">
									<view style="color: #AD5A6C;font-size: 24rpx;font-weight: 350;">
										升档与微调仅支持对3天内生成结果进行操作，过期不可用</view>
									<view
										style="display: flex;justify-content: center;align-items: center;margin-top: 30rpx;">
										<view style="color: #000000;font-size: 30rpx;font-weight: 500;">升档</view>
										<view :class="tabw==1?'sd-active':'sd'" @click="clickOptionS(1)">S1</view>
										<view :class="tabw==2?'sd-active':'sd'" @click="clickOptionS(2)">S2</view>
										<view :class="tabw==3?'sd-active':'sd'" @click="clickOptionS(3)">S3</view>
										<view :class="tabw==4?'sd-active':'sd'" @click="clickOptionS(4)">S4</view>
									</view>
									<view
										style="display: flex;justify-content: center;align-items: center;margin-top: 30rpx;">
										<view style="color: #000000;font-size: 30rpx;font-weight: 500;">微调</view>
										<view :class="tabw==5?'sd-active':'sd'" @click="clickOptionW(1)">W1</view>
										<view :class="tabw==6?'sd-active':'sd'" @click="clickOptionW(2)">W2</view>
										<view :class="tabw==7?'sd-active':'sd'" @click="clickOptionW(3)">W3</view>
										<view :class="tabw==8?'sd-active':'sd'" @click="clickOptionW(4)">W4</view>
									</view>
								</view>
							</view>
							<view v-if="imageList.length==0&&id>0"
								style="width: 100%;height: 100%;background-image: linear-gradient(to bottom, #0033FF, #D000FF);color: #fff;display: flex;justify-content: center;align-items: center;">
								<view style="text-align: center;">
									<view class="textwhite16 marginTop"> {{percent}}%</view>
									<view class="textwhite16 ">正在生成中</view>
									<view class="progress-bg marginTop">
										<view :style="{'width':percent + '%'}" class="progress-content"></view>
									</view>
								</view>
							</view>
							<!-- <mosowe-touch-clip-image
							    v-if="attachment[0]"
							    ref="clipCanvas"
							    :image="attachment[0]"
							    :width="width"
							    :height="height" 
							    radius="10"
							    @clipImageAfter="clipImageAfter">
							    </mosowe-touch-clip-image > -->
						</view>
						<view class="btn_div" v-if="enableUpdate">
							<view class="button flex-center">
								<view @click="createJob">立即生成</view>
								<view
									style="display: flex;justify-content: center;align-items: center; border-radius: 50%;position: absolute;right: 50rpx;background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 2%, rgba(255, 255, 255, 0.2) 231%);height: 80rpx;width: 80rpx;">
									<zb-tooltip color="transparent" placement="top-end" ref="tooltip12">
										<image src="/static/image/ai/mx.png" style="width:40rpx;height: 45rpx;"></image>
										<view slot="content" class=""
											style="border: 1px solid #BCBCBC;width: 200px;height:300px;background: #FFFFFF;border-radius: 14px;text-align: center;padding: 40rpx;">
											<view style="font-size: 20px;font-weight: bold;color: #000000;">AI生成明细
											</view>
											<view style="margin-top: 40rpx;">
												<view
													style="color: #000000;font-size: 14px;font-weight: 500;text-align: left;">
													积分消耗</view>
												<view
													style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
													<view style="color: #666666;font-size: 12px;font-weight: 500;">
														AI生成消耗</view>
													<view style="color: #000000;font-size: 12px;font-weight: 500;">-20积分
													</view>
												</view>
												<view
													style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
													<view style="color: #666666;font-size: 12px;font-weight: 500;">
														AI快速模式</view>
													<view style="color: #000000;font-size: 12px;font-weight: 500;">-5积分
													</view>
												</view>
												<view
													style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
													<view style="color: #666666;font-size: 12px;font-weight: 500;">合计
													</view>
													<view style="color: #DF0000;font-size: 12px;font-weight: 500;">-25积分
													</view>
												</view>
											</view>
											<view style="margin-top: 40rpx;">
												<view
													style="color: #000000;font-size: 14px;font-weight: 500;text-align: left;">
													权益卡消耗</view>
												<view
													style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
													<view style="color: #666666;font-size: 12px;font-weight: 500;">
														生成可用：无限</view>
													<view style="color: #DF0000;font-size: 12px;font-weight: 500;">-1次
													</view>
												</view>
												<view
													style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
													<view style="color: #666666;font-size: 12px;font-weight: 500;">
														快速模式：298次/月</view>
													<view style="color: #DF0000;font-size: 12px;font-weight: 500;">-1次
													</view>
												</view>
											</view>
										</view>
									</zb-tooltip>

								</view>
							</view>
						</view>


						<view class="btn_div" v-if="!enableUpdate">
							<view class="button flex-center" style="background: #D0D0D0;">
								<view>立即生成</view>
							</view>
						</view>

					</view>

				</view>
				<view class="menu-wrap" style="width: 800rpx;">
					<view
						style="height: 90rpx;border-left: 1px solid rgb(216, 216, 216);display: flex;justify-content: center;align-items: center;">
						<view
							style="border-radius: 7px;background: #E4E4E4;display: flex;justify-content: center;align-items: center;height: 70rpx;width: 95%;padding: 10rpx 20rpx 10rpx 20rpx;">
							<view :class="tabRight==1?'menu-button_active':'menu-button'" @click="setRight(1)">参数设置
							</view>
							<view :class="tabRight==2?'menu-button_active':'menu-button'" @click="setRight(2)">历史记录
							</view>
						</view>
					</view>
					<view v-show="tabRight==1">
						<view class="card">
							<view class="title">模型选择</view>
							<view>
								<view style="margin-top: 25rpx;margin-bottom: 25rpx;">
									<image src="/static/image/ai/mode-a.png" v-show="moduleIndex==4"
										@click="moduleChange(4)" style="height: 130rpx;" mode="heightFix">
									</image>
									<image src="/static/image/ai/mode.png" v-show="moduleIndex!=4"
										@click="moduleChange(4)" style="height: 130rpx;" mode="heightFix">
									</image>
									<image src="/static/image/ai/mode1.png" v-show="moduleIndex!=5"
										@click="moduleChange(5)" style="height: 130rpx;margin-left: 40rpx;"
										mode="heightFix"></image>
									<image src="/static/image/ai/mode-a1.png" v-show="moduleIndex==5"
										@click="moduleChange(5)" style="height: 130rpx;margin-left: 40rpx;"
										mode="heightFix"></image>
									<image src="/static/image/ai/mode2.png" v-show="moduleIndex!=6"
										@click="moduleChange(6)" style="height: 130rpx;margin-left: 40rpx;"
										mode="heightFix"></image>
									<image src="/static/image/ai/mode-a2.png" v-show="moduleIndex==6"
										@click="moduleChange(6)" style="height: 130rpx;margin-left: 40rpx;"
										mode="heightFix"></image>
								</view>
							</view>
						</view>
						<view class="card">
							<view class="title">图像比例</view>
							<view>
								<view
									style="margin-top: 25rpx;margin-bottom: 25rpx;display: flex;justify-content: center;align-items: center;">
									<view class="" :class="sizeTab1Index==1?'model-active':'model'"
										@click="size1Change(1)">
										<image src="/static/image/ai/1a.png" v-if="sizeTab1Index==1"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<image src="/static/image/ai/1.png" v-if="sizeTab1Index!=1"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<view class="text">1:1</view>
									</view>
									<view :class="sizeTab1Index==3?'model-active':'model'" style="margin-left: 15rpx;"
										@click="size1Change(3)">
										<image src="/static/image/ai/4.png" v-if="sizeTab1Index!=3"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<image src="/static/image/ai/4a.png" v-if="sizeTab1Index==3"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<view class="text">4:3</view>
									</view>
									<view :class="sizeTab1Index==4?'model-active':'model'" style="margin-left: 15rpx;"
										@click="size1Change(4)">
										<image src="/static/image/ai/3.png" v-if="sizeTab1Index!=4"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<image src="/static/image/ai/3a.png" v-if="sizeTab1Index==4"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<view class="text">3:4</view>
									</view>
									<view :class="sizeTab1Index==6?'model-active':'model'" style="margin-left: 15rpx;"
										@click="size1Change(6)">
										<image src="/static/image/ai/9.png" v-if="sizeTab1Index!=6"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<image src="/static/image/ai/9a.png" v-if="sizeTab1Index==6"
											style="height: 40rpx;" mode="heightFix">
										</image>
										<view class="text">9:16</view>
									</view>
								</view>
							</view>
						</view>
						<view class="card">
							<view class="title">生成模式</view>
							<view>
								<view :class="productMode==1?'sc-active':'sc'" @click="modeChange(1)"
									style="margin-top: 25rpx;margin-bottom: 25rpx;display: flex;align-items: center;justify-content: space-between;">
									<view>普通生成</view>
									<view>预计排队1-5分钟</view>
								</view>
								<view :class="productMode==2?'sc-active':'sc'" @click="modeChange(2)"
									style="margin-top: 25rpx;margin-bottom: 25rpx;display: flex;align-items: center;justify-content: space-between;">
									<view>快速生成</view>
									<view>1分钟内 | 5积分/次</view>
								</view>
							</view>
						</view>
						<view class="card" style="border: 0;">
							<view class="sc"
								style="margin-top: 25rpx;margin-bottom: 25rpx;display: flex;align-items: center;justify-content: center;">
								<image src="/static/image/ai/cz.png" style="height: 35rpx;" mode="heightFix">
								</image>
								<view class="button">重置</view>
							</view>
						</view>
					</view>
					<view v-show="tabRight==2">
						<view class="cc">
							<view class="text">云空间</view>
							<view class="text" style="font-weight: normal;margin-left: 30rpx;">0.16GB / 10GB</view>
						</view>
						<scroll-view :scroll-y="true" style="width: 800rpx;overflow-y: scroll;height: 100%;"
							class="container" :style="'height:'+(screenHeight-40)+'px'">
							<!-- <liu-waterfall-ai v-if="list.length > 0" :dataList="list" :column="columns"
								@click="click"></liu-waterfall-ai> -->
							<view style="display: flex;flex-wrap: wrap;">
								<view class="item" v-for="(childItem, childIndex) in list" :key="childIndex"
									style="width: calc(33% - 10px);" :id="'item' + childItem.id"
									@click.stop="click(childItem)"
									:style="'background-color:#FFFFFF;margin:8rpx;border-radius:32rpx;'">
									<image
										:src="childItem.job.finalResultImages[0]?childItem.job.finalResultImages[0]:'/static/image/ai/imgerr.png'"
										error="" mode="widthFix" lazy-load :style="{width: '100%'}"
										style="border-radius: 8px;">
									</image>
								</view>
							</view>
							<!-- <fui-pagination :total="total" @change="nex" :pageType="2"></fui-pagination> -->
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view>
									共 {{total}} 项数据
								</view>
								<view>
									<fui-pagination :total="total" custom :pageType="2" :width="20" @change="nex"
										background="#fff" activeBgColor="#D000FF">
										<template v-slot:prev>
											<fui-icon :size="40" name="arrowleft" color="#000"></fui-icon>
										</template>
										<template v-slot:next>
											<fui-icon :size="40" name="arrowright" color="#000"></fui-icon>
										</template>
									</fui-pagination>
								</view>
							</view>

						</scroll-view>
					</view>

				</view>
			</view>
		</view>
		<!-- <zw-footer></zw-footer> -->
		<fui-landscape :show="show" :closable="closable" :position="position" @close="closePopup">
			<view class="fui-ani__box">

				<view class="fui-flex--center">
					<view>
						<image class="fui-hd__img" src="/static/image/ai/jg.png" mode="widthFix"></image>
						<text class="fui-ani__title" style="margin-left: 15rpx;">系统升级中
						</text>
					</view>
					<text class="fui-ani__title">暂无法提交任务</text>
					<text class="fui-desc">预计：2023-12-25 00:00 恢复</text>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				options: [{
						text: '仅下载当前图片',
						value: 1,
					},
					{
						text: '下载整组图片',
						value: 2,
					}
				],
				range: '仅下载当前图片',
				rangeShow: false,
				dw_visible: false,
				deloptions: [{
						text: '仅删除当前图片',
						value: 1,
					},
					{
						text: '删除整组图片',
						value: 2,
					}
				],
				delrange: '仅删除当前图片',
				delrangeShow: false,
				del_visible: false,
				width: 300,
				height: 300,
				showPay: false,
				...centerConfig,
				accountInfo: {},
				counts: [],
				tabIndex: 1,
				screenHeight: 1000,
				type: 1,
				percent: 0,
				columns: 3,
				list: [],
				tabRight: 1,
				jobIdList: [],
				loading: false,
				page: 1,
				show: false,
				position: 2,
				closable: true,
				uploadUrl: '',
				attachment: [],
				status: '',

				enableUpdate: false,
				productMode: 1,
				highFun: false,
				highFun1: false,
				weight1: 1,
				weight2: 1,
				weight3: 1,
				styleNum: 1,
				pg: 10,
				badContent: "",
				seed: "",
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 4,
				goodContent: "",
				imageList: [],
				isActive: true,
				bigSizeCoin: 0,
				totalCoin: 0,
				labelTabIndex: 0,
				havePermissionTime: 0,
				usePermissionTime: 0,
				haveTryTime: 0,
				fastCoin: 0,
				tryTime: 0,
				styleArray: [],
				imageStyles: {
					width: 118,
					height: 82,
					border: {
						color: "#F0F0F0",
						width: 2,
						style: 'solid',
						radius: '14px'
					}
				},
				finishImg: [],
				showDialog: false,
				dialogTitle: "",
				timer: null,
				id: 0,
				returnData: [],
				tabw: -1,
				is_tab: false,
				total: 200,
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad() {
			this.uploadUrl = getApp().globalData.apiUrl1 + "/api/v1/file/upload";

			this.payInfo()
			this.$store.commit('tab', 0);
			this.screenHeight = uni.getSystemInfoSync().screenHeight - 250;
		},
		methods: {
			del(){
				
			},
			delfilterTap() {
				//显示下拉框
				this.$refs.delddmRange.show()
				this.delrangeShow = true;
			},
			delrangeItemClick(e) {
				console.log(e)
				this.delrange = e.text
				this.rangeClose()
			},
			delrangeClose() {
				this.delrangeShow = false;
			},
			filterTap() {
				//显示下拉框
				this.$refs.ddmRange.show()
				this.rangeShow = true;
			},
			rangeItemClick(e) {
				console.log(e)
				this.range = e.text
				this.rangeClose()
			},
			rangeClose() {
				this.rangeShow = false;
			},
			download() {
				window.location = this.imageList[0]
			},
			// 获取裁剪的图片
			clipImageAfter(data) {
				this.isClip = true;
				this.resultImage = data;
				console.log(data)
				this.image = '';
				this.clearImage();
			},
			// 清空画布
			clearImage() {
				this.$refs.clipCanvas.clearCanavas();
			},
			// 确定
			confirm() {
				this.$refs.clipCanvas.polygon();
			},
			//显示气泡框
			bubble() {
				this.showPay = true
			},
			//气泡框item点击事件
			itemClick(e) {
				console.log(e)
				this.onClose()
			},
			//隐藏气泡框
			onClose() {
				this.showPay = false
			},
			clickOptionS(num) {
				this.tabw = num;
				this.is_tab = true;
			},
			clickOptionW(num) {
				this.tabw = num + 4;
				this.is_tab = true;
			},
			createOptionS() {
				console.log('returnData', this.returnData)
				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				console.log('returnData', that.returnData)
				var pictureWeight = "";
				if (that.imageList.length == 2) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					pictureWeight = "--iw " + value1 + " --iw " + value2;
				}
				if (that.imageList.length == 3) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					var value3 = 0.5 + ((1.5) / 100 * that.weight3)
					pictureWeight = "--iw " + value1 + " --iw " + value2 + " --iw " + value3;
				}
				this.$util.request('/api/v1/job', {
					taskTag: "" + this.tabw,
					state: 6,
					type: 0,
					taskType: 2,
					productMode: that.returnData.productMode,
					plateUserId: this.plateUserId,
					taskRelationId: that.returnData.taskId,
					platformMessageId: that.returnData.platformMessageId,
					cmd: that.returnData.cmd,
					module: that.returnData.module,
					badContent: that.returnData.badContent,
					attachment: that.returnData.attachment,
					style: that.styleIndex,
					width2height: that.sizeTab1Index,
					pictureWeight: pictureWeight,
				}, (res) => {
					that.is_tab = false;
					that.id = res.data.id;
					console.log('任务id', res.data.id)
					that.type = 1
					that.timer = setInterval(function() {
						console.log(that.percent)
						that.percent++;
						if (that.percent > 98) {
							that.percent = 99;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, 4000);
					that.queryData();
					console.log('返回正确回调', res)
				}, false);

			},
			createOptionW() {
				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				this.tabw = num + 4;
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				this.$util.request('/api/v1/job', {
					taskTag: "" + (this.tabw - 4),
					state: 7,
					type: 7,
					taskType: 3,
					productMode: that.returnData.productMode,
					plateUserId: this.plateUserId,
					taskRelationId: that.returnData.taskId,
					platformMessageId: that.returnData.platformMessageId,
					cmd: that.returnData.cmd,
					attachment: that.returnData.attachment,
					module: that.returnData.module,
					badContent: that.returnData.badContent,
					style: that.styleIndex,
					width2height: that.sizeTab1Index,
					pictureWeight: pictureWeight,
				}, (res) => {
					that.is_tab = false;
					that.id = res.data.id;
					console.log('任务id', res.data.id)
					that.type = 1
					that.timer = setInterval(function() {
						console.log(that.percent)
						that.percent++;
						if (that.percent > 98) {
							that.percent = 99;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, 4000);
					that.queryData();
					console.log('返回正确回调', res)
				}, false);
			},
			redo() {
				this.type = 0;
				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				this.$util.request('/api/v1/job', {
					state: 5,
					plateUserId: this.plateUserId,
					type: 7,
					taskType: 4,
					productMode: that.returnData.productMode,
					taskRelationId: that.returnData.taskId,
					platformMessageId: that.returnData.platformMessageId,
					cmd: that.returnData.cmd,
					attachment: that.returnData.attachment,
					badContent: that.returnData.badContent,
					module: that.returnData.module,
					style: that.styleIndex,
					width2height: that.sizeTab1Index,
					pictureWeight: pictureWeight,
				}, (res) => {
					that.id = res.data.id;
					console.log('任务id', res.data.id)
					that.type = 1
					that.timer = setInterval(function() {
						console.log(that.percent)
						that.percent++;
						if (that.percent > 98) {
							that.percent = 99;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, 4000);
					that.queryData();
					console.log('返回正确回调', res)
				}, false);
			},
			load() {
				if (this.id > 0) {
					const that = this;
					that.timer = setInterval(function() {
						console.log(that.percent)
						that.percent++;
						if (that.percent > 98) {
							that.percent = 99;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, 4000);
					setTimeout(function() {
						that.queryData();
					}, 10);
				}
			},
			queryData() {
				const that = this;
				this.$util.request("/api/v1/job/" + this.id, {}, (res) => {
					console.log('返回正确回调', res)
					var array = res.data.finalResultImages;
					if (array == undefined || array.length == 0) {
						setTimeout(function() {
							that.queryData()
						}, 10000);
					} else {
						that.plateUserId = res.data.plateUserId
						that.returnData = res.data;
						for (var i = 0; i < array.length && i < 4; i++) {
							that.imageList.push(array[i])
						}
						if (res.data.taskType == 1 || res.data.taskType == 3 || res.data.taskType == 4) {
							that.showDo = true
						} else {
							that.showDo = false
						}
						console.log('!that.nextDo&&that.type==1')
						console.log(!that.nextDo && that.type == 1)
						console.log('!that.nextDo')
						console.log(!that.nextDo)
						console.log('that.type')
						console.log(that.type)
						that.type = 1;
						that.dofinish = true;
						that.enableUpdate = true;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, true);
			},
			requstCategoryData() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/category/all";
				this.$util.request('/api/v1/category/all', {}, (res) => {
					this.accountInfo = res.accountInfo;
				}, true);
			},
			payInfo() {
				const that = this;
				this.$util.request('/api/v1/job/payInfo', {
					style: that.styleIndex,
					module: that.moduleIndex,
					width2height: that.sizeTab1Index,
					sizeIndex: that.sizeTab1Index,
					state: 0,
					type: that.productMode,
					productMode: that.productMode,
					style: that.styleIndex,
					module: that.moduleIndex,
					width2height: that.sizeTab1Index
				}, (res) => {
					var coin = res.data.coin;
					var fastCoin = res.data.fastCoin;
					that.usePermissionTime = res.data.permissionTime;
					that.havePermissionTime = res.data.user.vipNum;
					that.haveTryTime = res.data.user.vipNum0;
					that.tryTime = res.data.tryTime;
					that.fastCoin = fastCoin;
					if ((res.data.user.coin >= coin + fastCoin) && res.data.todayTime > 0) {
						that.totalCoin = coin;
						that.showDialog = true;
					} else {

						console.log(res.data.user.level)

						if (0) {
							console.log(res.data.user.level)


							uni.showModal({
								title: "您的每日AI 生成体验次数已使用完请前往开通权益卡",
								confirmText: "去开通",
								cancelText: "我知道",
								success: function() {
									uni.navigateTo({
										url: "/pages/Coin/Coin?openType=1"
									})
								}
							})


						} else

						if (res.data.todayTime > 0) {
							uni.showModal({
								title: "你的积分不足",
								confirmText: "去充值",
								success: function() {
									uni.navigateTo({
										url: "/pages/Charge/Charge"
									})
								}
							})
						} else {
							uni.showModal({
								title: "您的每日AI 生成体验次数 已使用完请前往开通权益卡",
								confirmText: "去开通",
								cancelText: "我知道",
								success: function() {
									uni.navigateTo({
										url: "/pages/Coin/Coin?openType=1"
									})
								}
							})
						}


					}
					console.log('返回正确回调', res)
				}, true);
			},
			modeChange(num) {
				this.productMode = num
			},
			size1Change(num) {
				this.sizeTab1Index = num;
			},
			styleChange(num) {
				this.styleIndex = num;
			},
			moduleChange(num) {
				this.moduleIndex = num;
			},
			createJob() {
				this.enableUpdate = false;
				if (this.is_tab && this.tabw < 4) {
					this.createOptionS();
					return
				}
				if (this.is_tab && this.tabw >= 4) {
					this.createOptionS();
					return
				}
				if (!this.attachment && !this.goodContent) {
					this.enableUpdate = true;
					uni.showToast({
						title: "内容不能为空"
					})
					return
				}
				if (this.attachment.length < 2) {
					this.enableUpdate = true;
					uni.showToast({
						title: "最少上传两张图"
					})
					return
				}
				uni.showLoading({
					title: "上传资料中..."
				})
				var cmd = this.goodContent;
				const that = this
				var pictureWeight = "";
				if (that.imageList.length == 2) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					pictureWeight = "--iw " + value1 + " --iw " + value2;
				}
				if (that.imageList.length == 3) {
					var value1 = 0.5 + ((1.5) / 100 * that.weight1)
					var value2 = 0.5 + ((1.5) / 100 * that.weight2)
					var value3 = 0.5 + ((1.5) / 100 * that.weight3)
					pictureWeight = "--iw " + value1 + " --iw " + value2 + " --iw " + value3;
				}
				this.$util.request('/api/v1/job', {
					style: that.styleIndex,
					module: that.moduleIndex,
					width2height: that.sizeTab1Index,
					pictureWeight: pictureWeight,
					cmd: cmd,
					taskType: 1,
					badContent: that.badContent,
					state: 0,
					type: that.productMode,
					attachment: this.attachment.join(" "),
					style: that.styleIndex,
					productMode: that.productMode,

				}, (res) => {
					that.is_tab = true;
					uni.hideLoading()

					console.log('返回正确回调', res)
					var size = "1:1";
					var sizeArray = [
						"1:1",
						"1:1",
						"1:2",
						"4:3",
						"3:4",
						"16:9",
						"9:16"
					]
					that.id = res.data.id;
					size = sizeArray[that.sizeTab1Index]
					var module = "精彩"
					var moduleArray = [
						"1:1",
						"1:1",
						"1:2",
						"1:2",
						"精彩",
						"细腻",
						"动漫",
						"创意",
						"照片"
					]
					module = moduleArray[that.moduleIndex]
					var style = "长焦镜头"
					var styleArray = [
						"长焦镜头",
						"长焦镜头",
						"手绘背景",
						"CG数字渲染",
						"哑光颜",
						"X光片",
						"矢量设计海报",
						"极简线条画",
						"炭笔画",
						"更多"
					]
					style = styleArray[that.styleIndex]
					that.badContent = '';
					that.goodContent = ''
					that.imageList = [];
					that.finishImg = [];
					that.load();
				}, false);
			},
			//上传成功时触发
			success(e) {
				console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				console.log(res.data)
				if (res.data) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(res.data, e.index)
				}
			},
			//上传失败时触发
			error(e) {
				this.status = e.status
			},
			//选择图片或上传完成时触发
			complete(e) {
				this.attachment = e.urls
				if (this.status === 'success') {
					console.log(this.attachment)
					this.imageList = [];
					this.id = 0;
				}
				if (this.attachment.length > 1) {
					this.enableUpdate = true;
				}
				if (this.attachment.length < 2) {
					this.enableUpdate = false;
				}
			},
			closePopup() {
				this.show = false
			},
			click() {

			},
			setRight(index) {
				this.tabRight = index;
				if (this.tabRight == 2) {
					this.page -= 1;
					this.getList();
				}
			},
			setComd(index) {
				this.type = index
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/workbench/text/text',
						fail(err) {
							console.log(err)
						}
					})
				}
				if (index == 3) {
					uni.navigateTo({
						url: '/pages/workbench/describe/describe',
						fail(err) {
							console.log(err)
						}
					})
				}
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},

			nex(e) {
				console.log(e)
				this.page = e.current - 1;
				this.getList();
			},
			getList() {
				let that = this;
				this.$util.request('/api/v1/notice/mine', {
					page: this.page,
					size: 20,
					type: 2
				}, (res) => {
					// that.page = that.page + 1;
					that.loading = false;
					that.list = res.data
					// var tempList = [];
					// for (var index = 0; index < list.length; index++) {
					// 	var item = list[index];
					// 	console.log(item)
					// 	var key = "key_" + item.jobId;
					// 	if (that.jobIdList.indexOf(key) > 0) {
					// 		continue
					// 	}
					// 	that.jobIdList.push(key)
					// 	tempList.push(item.job);

					// }
					// that.list = that.list = tempList
					// that.total=res.data
					console.log(that.list)
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.fui-filter__item {
		width: 120px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		background-color: #D8D8D8;
		border-radius: 5px;
	}

	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.btn_div {
		position: absolute;
		bottom: -30px;
		width: 45%;
		text-align: center;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12px;
	}

	.loadingContent {
		border-radius: 14rpx;
		background: rgba(250, 250, 250, 0.3);
		width: 720rpx;
		height: 720rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.progress-bg {
		width: 142.92px;
		height: 6.8px;
		border-radius: 20px;
		background: #D8D8D8;
	}

	.progress-content {
		height: 6.8px;
		border-radius: 20px;
		opacity: 1;
		background: #D000FF;
	}

	.fui-ani__title {
		font-family: 思源黑体;
		font-size: 18px;
		font-weight: 500;
		line-height: 40px;
		text-align: center;
		letter-spacing: 0px;

		font-feature-settings: "kern" on;
		color: #D8D8D8;
	}

	.fui-desc {
		margin-top: 60rpx;
		font-family: Source Han Sans;
		font-size: 14px;
		font-weight: normal;
		line-height: 40px;
		text-align: center;
		font-feature-settings: "kern" on;
		color: #D8D8D8;
	}

	.fui-flex--center {
		display: flex;
		margin: 40rpx 60rpx 40rpx 60rpx;
		align-items: center;
		flex-direction: column;
	}

	.fui-ani__box {
		width: 640rpx;
		border-radius: 24rpx;
		padding-bottom: 64rpx;

		border-radius: 19px;

		background: #000000;
	}

	.fui-hd__img {
		width: 40rpx;
		height: 42rpx;
	}

	.cc {
		// width: 100%;
		height: 40rpx;
		border-radius: 6px;
		background: linear-gradient(90deg, #000000 3%, #D6D6D6 100%, rgba(216, 216, 216, 0) 100%);
		margin: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 5rpx 0 5rpx 30rpx;

		.text {
			font-family: 思源黑体;
			font-size: 14px;
			font-weight: bold;
			line-height: 20px;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: #FFFFFF;
		}
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.menu-wrapper {
		// padding-bottom: 40px;
		height: $page-height;
		background-color: #fff;

		.wrap {
			height: 100%;
			width: 100%;
			margin: 0 auto;
			display: flex;
			background-color: #fff;

			.menu-wrap {
				width: 234px;
				// padding: 36px 0;
				background-color: $bg-color;

				.title {
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: 900;
					line-height: 20px;
					letter-spacing: 0px;
					color: #000000;
				}

				.card {
					border-bottom: 1px solid #D8D8D8;
					margin: 30rpx;


					.model {
						padding: 24rpx 24rpx 10rpx 24rpx;
						border-radius: 10px;
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-items: center;
						align-items: center;

						background: linear-gradient(114deg, rgba(254, 130, 219, 0.2) 7%, rgba(104, 228, 255, 0.2) 103%), rgba(241, 241, 241, 0.1);

						.text {
							font-family: OPPOSans;
							font-size: 12px;
							font-weight: 500;
							line-height: 40rpx;
							text-align: center;
							letter-spacing: 0px;

							color: #0026BC;
						}

						box-sizing: border-box;
						border: 1px solid;
						border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%) 1;

						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
					}

					.model-active {
						padding: 24rpx 24rpx 10rpx 24rpx;
						border-radius: 10px;
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-items: center;
						align-items: center;
						background: linear-gradient(114deg, rgba(203, 30, 155, 0.6) 7%, rgba(7, 154, 187, 0.6) 103%), rgba(241, 241, 241, 0.1);

						box-sizing: border-box;
						border: 2px solid #0033FF;

						.text {
							font-family: OPPOSans;
							font-size: 12px;
							font-weight: 500;
							line-height: 40rpx;
							text-align: center;
							letter-spacing: 0px;

							color: #FFFFFF;
						}

						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
					}

					.sc-active {
						padding: 30rpx;
						border-radius: 10px;
						background: linear-gradient(96deg, rgba(203, 30, 155, 0.6) 4%, rgba(7, 154, 187, 0.6) 104%), rgba(241, 241, 241, 0.1);
						box-sizing: border-box;
						border: 2px solid #0033FF;
						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
						font-family: OPPOSans;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						letter-spacing: 0px;
						color: #FFFFFF;
					}

					.sc {
						padding: 30rpx;
						background: linear-gradient(96deg, rgba(254, 130, 219, 0.2) 4%, rgba(104, 228, 255, 0.2) 104%), rgba(241, 241, 241, 0.1);
						border-radius: 10px;
						box-sizing: border-box;
						border: 1px solid;
						border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%);
						font-family: OPPOSans;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						text-align: right;
						letter-spacing: 0px;
						color: #0026BC;
						backdrop-filter: blur(3px);
						box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);

						.button {
							margin-left: 15rpx;
							font-family: 思源黑体;
							font-size: 16px;
							font-weight: 700;
							line-height: 20px;
							text-align: center;
							letter-spacing: 0px;
							color: #0033FF;
						}
					}


				}

				.menu-button_active {
					width: 50%;
					background: linear-gradient(97deg, rgba(203, 30, 155, 0.6) 4%, rgba(7, 154, 187, 0.6) 104%), rgba(241, 241, 241, 0.1);
					border-radius: 8px;
					box-sizing: border-box;
					border: 2px solid #0033FF;
					backdrop-filter: blur(3px);
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: normal;
					line-height: 60rpx;
					text-align: center;
					letter-spacing: 0em;
					color: #FFFFFF;
				}

				.menu-button {
					width: 50%;
					background: #E4E4E4;
					border-radius: 8px;
					font-family: 思源黑体;
					font-size: 14px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0em;
					color: #000000;
				}

				.menu-group {
					margin: 0 48px 12px;

					.title {
						font-size: 16px;
						font-weight: 400;
						line-height: 52px;
						color: #333;
					}

					.menu-list {

						.menu {
							padding: 6px 0;
							color: #757575;
							cursor: pointer;

							&:hover {
								color: $text-color;
							}

							&.active {
								color: $color-primary;
							}
						}
					}
				}
			}

			.main-wrap {
				flex: 1;
				height: 100%;
				background-color: $bg-color;

				.card {
					margin: 20rpx;
					width: 600rpx;
					height: 600rpx;
					border-radius: 12px;
					opacity: 1;
					background: #FFFFFF;

					box-sizing: border-box;
					border: 5rpx dashed #C1C1C1;

					.sd {
						width: 120rpx;
						height: 60rpx;
						background: #4E5058;
						border-radius: 6px;
						color: #FFFFFF;
						font-weight: 500;
						font-size: 36rpx;
						text-align: center;
						align-items: center;
						line-height: 60rpx;
						// padding: 12rpx 30rpx 12rpx 30rpx;
						margin-left: 30rpx;
					}

					.sd-active {
						width: 120rpx;
						height: 60rpx;
						background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%);
						border-radius: 6px;
						color: #FFFFFF;
						font-weight: 500;
						font-size: 36rpx;
						text-align: center;
						align-items: center;
						line-height: 60rpx;
						margin-left: 30rpx;
					}


				}

				.button {
					border-radius: 12px;
					background: linear-gradient(90deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%);
					font-family: 思源黑体;
					font-size: 18px;
					font-weight: bold;
					line-height: 20px;
					letter-spacing: 0px;
					color: #FFFFFF;
					border-radius: 12px;
					// text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.302);
					// border: 10px solid #FFFFFF;
					padding: 40rpx;
				}

				// padding: 36px 48px;
				.tool {
					height: 90rpx;
					border-left: 1px solid rgb(216, 216, 216);
					border-right: 1px solid rgb(216, 216, 216);
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;
				}
			}
		}
	}

	.fui-col__item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;

		.text {
			margin-left: 20rpx;
			font-family: 思源黑体;
			font-size: 16px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0em;
			color: #000000;
		}

		image {
			width: 20px;
			height: 20px;
		}
	}

	.active {
		background: linear-gradient(101deg, rgba(254, 130, 219, 0.2) 4%, rgba(104, 228, 255, 0.2) 103%), rgba(241, 241, 241, 0.1);
		box-sizing: border-box;
		border: 1px solid;
		border-image: linear-gradient(90deg, rgba(253, 132, 220, 0.5) 3%, rgba(127, 214, 250, 0.5) 100%) 1;
		backdrop-filter: blur(3px);
		box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.4);
		border-right: 4px solid #0033FF;
	}
</style>